<template>
  <view 
    class="bar-container" 
    :style="`width:${screenWidth}px; height:${height}px; background-color:${backgroundColor}`">
    <view 
      class="indicator"
      :style="indicatorStyle">
      <view 
        class="indicator-before"
        :style="indicatorBeforeStyle"></view>
      <view 
        class="indicator-after"
        :style="indicatorAfterStyle"></view>
      <view class="indicator-content" @tap="tapIndicator">
        <slot name="indicatorContent"></slot>
      </view>
    </view>
    <view
      v-for="(item, index) in items"
      :key="index"
      class="bar-item item-container"
      @tap="selectTab(index, item)"
      :style="`width:${itemWidth}px`">
      <template v-if="item.type !== 'indicator'">
        <view class="icon">
          <image
            :src="current === index && item.selectedIcon ? item.selectedIcon.src : item.icon.src"
            :style="iconStyle(item, current === index)"/>
        </view>
        <view 
          class="text"
          :style="textStyle(index)">
          {{ item.text }}
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { ref, computed, onMounted } from 'vue';

export default {
  props: {
    current: {
      type: Number,
      default: 0
    },
    selectedColor: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 60
    },
    backgroundColor: {
      type: String,
      default: '#eee'
    },
    indicatorBackground: {
      type: String,
      default: 'green'
    },
    screenBackgroundColor: {
      type: String,
      default: 'white'
    },
    indicatorPadding: {
      type: Number,
      default: 4
    },
    indicatorSize: {
      type: Number,
      default: 50
    },
    digHolePosition: {
      type: Number,
      default: 0
    },
    digHoleAngle: {
      type: Object,
      default: () => ({ width: 25, height: 20 })
    },
    items: {
      type: Array,
      default: () => []
    }
  },

  setup(props, { emit }) {
    // 响应式状态
    const screenWidth = ref(0);

    // 计算属性
    const xDiff = computed(() => {
      const indicatorTotal = props.indicatorPadding * 2 + props.indicatorSize;
      return (screenWidth.value / props.items.length) * props.digHolePosition +
        ((screenWidth.value / props.items.length) - indicatorTotal) / 2;
    });

    const itemWidth = computed(() => {
      return screenWidth.value / props.items.length;
    });

    // 样式计算
    const indicatorStyle = computed(() => ({
      left: `${xDiff.value}px`,
      background: props.indicatorBackground,
      border: `${props.indicatorPadding}px solid ${props.screenBackgroundColor}`,
      width: `${props.indicatorSize}px`,
      height: `${props.indicatorSize}px`,
      top: `${-(props.indicatorSize / 2 + props.indicatorPadding)}px`
    }));

    const indicatorBeforeStyle = computed(() => ({
      left: `-${props.digHoleAngle.width}px`,
      width: `${props.digHoleAngle.width}px`,
      height: `${props.digHoleAngle.height}px`,
      top: `${props.indicatorSize / 2}px`,
      boxShadow: `0.2px -10px 0 0 ${props.screenBackgroundColor}`
    }));

    const indicatorAfterStyle = computed(() => ({
      right: `-${props.digHoleAngle.width}px`,
      width: `${props.digHoleAngle.width}px`,
      height: `${props.digHoleAngle.height}px`,
      top: `${props.indicatorSize / 2}px`,
      boxShadow: `-0.2px -10px 0 0 ${props.screenBackgroundColor}`
    }));

    // 方法
    const tapIndicator = () => emit('onIndicatorClick');
    
    const selectTab = (index, item) => {
      emit('onTabSelect', index, item);
    };

    // 图标样式生成器
    const iconStyle = (item, isActive) => {
      const icon = isActive ? item.selectedIcon : item.icon;
      return {
        width: `${icon.width || item.icon.width}px`,
        height: `${icon.height || item.icon.height}px`
      };
    };

    // 文本样式生成器
    const textStyle = (index) => ({
      color: index === props.current ? props.selectedColor : props.color,
      fontSize: props.items[index]?.fontSize || 'inherit'
    });

    // 生命周期
    onMounted(() => {
      uni.getSystemInfo({
        success: (res) => {
          screenWidth.value = res.screenWidth;
        },
        fail: (err) => {
          console.error('获取系统信息失败:', err);
        }
      });
    });

    return {
      screenWidth,
      xDiff,
      itemWidth,
      indicatorStyle,
      indicatorBeforeStyle,
      indicatorAfterStyle,
      tapIndicator,
      selectTab,
      iconStyle,
      textStyle
    };
  }
};
</script>

<style scoped>
.bar-container {
  position: fixed;
  bottom: 0px;
  display: flex;
}

.item-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.icon {
  position: relative;
  display: flex;
  justify-content: center;
}

.icon image {
  align-self: center;
}

.text {
  align-self: center;
}

.indicator {
  position: absolute;
  border-radius: 50%;
}

.indicator-before {
  position: absolute;
  border-top-right-radius: 100%;
  background-color: transparent;
}

.indicator-after {
  position: absolute;
  border-top-left-radius: 100%;
  background-color: transparent;
}

.indicator-content {
  width: 100%;
  height: 100%;
}
</style>